<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <style>
    .pages {}

    .pages li {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    .active {
      background: blue;
      color: white;
    }

    .asc {
      width: 20px;
      height: 20px;
      background: url('./1.png');
      transform: rotate(90deg);
      display: inline-block;
      background-size: cover;
    }


    .desc {
      width: 20px;
      height: 20px;
      background: url('./1.png');
      transform: rotate(270deg);
      display: inline-block;
      background-size: cover;
    }

    .mask {
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #666;
      opacity: 0.8;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dialog {
      width: 300px;
      height: 280px;
      background: white;
      opacity: 1;
    }
  </style>
</head>

<body>


  <div id="app">

    <input type="text" v-model="keyworddtext"> <button @click="searchHandler">搜索</button>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <th style="width: 10px">logo</th>
          <th>公司名称</th>
          <th>城市</th>
          <th>职位信息</th>
          <th style="width: 70px">
            <span>
              薪水
            </span>
            <span :class="{asc:sort==='asc',desc:sort==='desc'}" @click="handleSort">

            </span>

          </th>
          <th style="width: 70px">时间</th>
          <th style="width: 120px">操作</th>
        </tr>


        <tr v-for="item in datalist">
          <td>
            <!-- <img v-bind:src="'/upload/'+item.companyLogo" style="width: 60px;" alt=""> -->

          </td>
          <td>{{item.companyName}}</td>
          <td>
            {{item.city}}
          </td>
          <td>
            {{item.positionName}}
          </td>
          <td>{{item.salary}}</td>
          <td style="width: 100px">{{item.createTime}}</td>
          <td>

            <button name="edit" class="btn-success" :data-id="item._id" @click="handleEdit(item)"> 编辑</button>
            <button name="del" class="btn-danger" @click="delHandler(item._id)" :data-id="item._id"> 删除</button>

          </td>
        </tr>

      </tbody>
    </table>

    <ul class="pages">
      <li v-for="n in pages" @click="gopage(n)" v-bind:class="n===pageno? 'active':''">{{n}}</li>
    </ul>

    <common-dialog v-if="isShowEidt" title="职位编辑" @close="isShowEidt=false">
      公司名称：
      <input v-model="position.companyName" type="text">
      <button @click="handleSubmit">提交</button>

    </common-dialog>

  </div>

  <script type="text/template" id="temp-dialog">
    <div class="mask">
    <div class="dialog">
      <header>
        {{title}}

        <button @click="$emit('close')">关闭</button>
      </header>
      <slot></slot>
    </div>
    </div>
  </script>


  <script>

    Vue.component('common-dialog', {
      props: ['title'],
      template: '#temp-dialog'
    })


    var vm = new Vue({
      el: "#app",
      data: {
        isShowEidt: false,
        keyworddtext: '',
        keyword: '',
        pageno: 1,
        pagesize: 5,
        sort: 'asc',
        originlist: [],
        position: {}
      },
      created() {
        fetch('./data.json').then((res) => res.json()).then((result) => {
          this.originlist = result.data;
        })
      },
      computed: {

        pages() {
          //查询
          let result = this.originlist.filter((item) => {
            let reg = RegExp(this.keyword, 'i');
            return reg.test(item.companyName)
          })
          return Math.ceil(result.length / this.pagesize);
        },

        datalist() {
          //查询
          let result = this.originlist.filter((item) => {
            let reg = RegExp(this.keyword, 'i');
            return reg.test(item.companyName)
          })

          //排序
          if (this.sort) {
            result = result.sort((a, b) => {
              let s1 = parseInt(a['salary'].replace('k', ''));
              let s2 = parseInt(b['salary'].replace('k', ''));
              if (this.sort === 'asc') {
                return s1 - s2;
              } else {
                return s2 - s1;
              }
            })
          }

          let startIndex = (this.pageno - 1) * this.pagesize;
          let endIndex = startIndex + this.pagesize;
          return result.slice(startIndex, endIndex);
        }
      },
      methods: {
        delHandler(id) {
          this.originlist.forEach((item, index) => {
            if (item._id === id) {
              this.originlist.splice(index, 1)
            }
          });
        },
        gopage(num) {
          this.pageno = num;
        },
        searchHandler() {
          this.keyword = this.keyworddtext;
        },
        handleSort() {
          this.sort = this.sort === 'asc' ? 'desc' : 'asc';
        },
        handleEdit(item) {
          this.position = Object.assign({}, item);
          this.isShowEidt = true;
        },
        handleSubmit() {
          let id = this.position._id;
          this.originlist.forEach((item, index) => {
            if (id === item._id) {
              vm.$set(vm.originlist, index, this.position)
            }
          })
          this.isShowEidt = false;
        }
      }
    })

  </script>

</body>

</html>